<template>
  <div class="bg">
    <div class="container" id="all">
        <span style="font-family:'楷体';font-weight: 900;font-size:40px;" id="titleName">欢迎使用！</span>
        <br>
        <hr>
        <hr>
        <br>
        <div class="form" id="form">
            <input type="text" placeholder="您的账号" id="account" @input="searchRepeatName" @focus="openSubmit" v-model="User.account">
            <input type="password" placeholder="您的密码(最长6位)" maxlength="6" v-model="User.password">
            <input type="password" placeholder="确认密码" @focus="openSubmit" @blur="confirmCode" v-model="confirmPassword">
            <input type="text" placeholder="联系电话" oninput ="value=value.replace(/[^\d]/g,'')"  maxlength="11" v-model="User.telephone">
            <input type="text" placeholder="您的工号" v-model="User.identity">
            <input type="text" placeholder="QQ邮箱" v-model="User.email">
            <button class="btn-register" id="submit" @click="toRegister">注册账号</button>
        </div>
    </div>
    <ul class="bg-squares">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <el-dialog
    title="用户协议"
    :visible.sync="userAgreementDialogVisible"
    width="70%"
    center>
      <div class="agreement-context">
        <span style="font-weight: 800;word-break: break-word;">
            用户在使用技术开发方（即，以下统称“技术开发方”）提供的各项服务之前，应仔细
            阅读本《用户协议》（以下简称“本协议”）。
        </span>
        <hr>
        <hr><hr><hr><hr>
        <span style="word-break: break-word;">
          &emsp; &emsp; 用户登录或使用技术开发方的服务，即视为用户已了解并明示同意本协议各项内容，
          本协议立即在用户与本技术开发方之间产生法律效力。用户登录、使用本产品服务的全
          部活动将受到本协议的约束并承担相应的责任和义务。如用户不同意本协议任何内容的，
          请用户立即停止使用技术开发方所提供的全部服务。 根据
          <a href="http://www.gov.cn/xinwen/2016-11/07/content_5129723.htm" target="_blank">《中华人民共和国网络安全法》</a>、
          <a href="http://www.gov.cn/gzdt/2013-07/19/content_2451360.htm" target="_blank">《电信和互联网用户个人信息保护规定》</a>
          及相关法律法规的规定，同时依据技术开发方与其合作伙伴之间的相关协议，用户必须
          已明示授权技术开发方合作伙伴（以下简称“合作伙伴”）、在此明示授权并委托技术开
          发方及其关联公司通过官方或相关实名认证平台、信用信息平台（包括但不限于：征信
          机构、银行信用信息平台、网络借贷平台、消费金融平台、第三方支付平台、公积金平
          台、投资理财平台等）及其它相关平台查询、验证、存储用户的个人信用信息，并输出
          给合作伙伴对用户的个人信用进行评估与参考使用。<br>
          &emsp; &emsp;用户理解并同意，具体的授权查询、验证、存储及输出的内容以合作伙
          伴要求查询、验证、存储、输出以及技术开发方及其关联公司实际查询、验证、存储、
          输出的信息为准。技术开发方及其关联公司会在授权范围内对相关个人信息予以处理（
          包括但不限于为保护用户个人信息而加密处理、掩码处理等一切为实现相关协议目的而
          进行的所有必要处理）并仅提供给合作伙伴使用，但用户与合作伙伴之间因授权的有效
          性、授权内容、授权范围、授权期限等发生的争议纠纷与技术开发方无关。如用户对合
          作伙伴的上述授权事项有任何异议或争议的，应立即停止使用技术开发方所提供的全部
          服务。用户使用本服务的，即表明用户已明示对合作伙伴、技术开发方及其关联公司授
          权查询、验证、处理、存储、在约定范围内使用其个人信息，并对授权的效力、查询验
          证的内容、查询验证平台、处理方式、使用范围等相关事项无任何事实或法律上的异议
          或争议。鉴于用户须授权合作伙伴并由该合作伙伴告知本服务后方能进入、登录并使用
          本服务，用户登录或使用本服务时起即视为用户与技术开发方的合作伙伴之间已存在合
          法的、充分的、必要的、不可撤销的授权，且用户已清楚知晓其授权提供相关信息可能
          对其造成的相关不利影响，如负面的信用评价等。为保护用户个人信息，技术开发方会
          采取合理措施对用户信息进行严格保密，同时督促并要求该特定合作伙伴进行严格保密。
          未经用户授权，技术开发方及其关联公司不会将用户信息提供给任何其他方。
        </span>
      </div>
      <el-checkbox v-model="checked">我已阅读用户协议,并同意本协议</el-checkbox>
      <div slot="footer" class="dialog-footer">
            <el-button plain type="info" style="width: 100px;height: 40px;" @click="userAgreementDialogVisible=false">取消</el-button>
            <el-button plain type="danger" style="width: 150px;height: 40px;" @click="registerUser">申请账号</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import { v4 as uuidv4} from 'uuid'
import {throttle} from 'lodash';
import { mapState } from 'vuex';
export default {
  name:'register',
  data(){
    return{
        checked:false,
        userAgreementDialogVisible:false,
        confirmPassword:'',
        User:{
            id:'',
            account:'',
            password:'',
            telephone:'',
            identity:'',
            createtime:'',
            email:'',
            salt:'',
        }
    }
  },
  computed:{
    ...mapState('register',['requestCode','accountList'])
  },
  methods:{
    // 为节约数据库资源使用节流控制查询次数，每2.5s查询一次
    searchRepeatName:throttle(
        function(){
            console.log("search")
            // 查询重复姓名，重复则锁定提交按钮
            this.$store.dispatch("register/getUserNameList");
            if(this.requestCode!=='500'){
                this.accountList.forEach((element,index)=>{
                    if(element===this.User.account){
                        this.$message({
                            message:'账号名已被占用！请重新输入',
                            type:'warning'
                        });
                        document.getElementById("submit").disabled=true;
                        document.getElementById("account").blur();
                        this.User.account='';
                        return;            
                    }
                })
            }
        },
        2500
    ),   
    confirmCode(){
        if(this.confirmPassword!==this.User.password){
            this.$message({
                message:'确认密码不一致！请重新输入',
                type:'warning'
            })
            document.getElementById("submit").disabled=true;
            this.confirmPassword='';
            return;
        }
    },
    openSubmit(){
        document.getElementById("submit").disabled=false;
    },
    toRegister(){
        let uuidCode=uuidv4();
        this.User.id=uuidCode.slice(0,-4),
        this.User.createtime=this.dayjs().format('YYYY-MM-DD HH:mm:ss'),
        this.User.salt=uuidCode.substring(uuidCode.length-4)
        
        if(this.User.id===''||this.User.account===''||this.User.password===''||this.confirmPassword===''||
        this.User.telephone===''||this.User.role===''||this.User.identity===''||
        this.User.createtime===''||this.User.email===''||this.User.state===''||this.User.salt===''){
            this.$message({
                message:'请检查输入是否存在空缺',
                type:'warning'
            })
            return;
        }
        var email=/^[1-9][0-9]{4,10}@qq.com/;
        if(!email.test(this.User.email)){
            this.$message({
                message:'请检查邮箱格式',
                type:'warning'
            })
            return;
        }
      this.userAgreementDialogVisible=true;
    },
    registerUser(){
        if(this.checked!==true){
            this.$message({
                message:'请先同意用户协议！否则无法注册账号',
                type:'warning'
            })
            return;
        }
        this.$store.dispatch("register/createUser",this.User)
        this.userAgreementDialogVisible=false;
        console.log(this.User)
    }
  }
}
</script>

<style scoped lang="css">
  *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
  .bg{
      position: absolute;
      height: 90%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(to top left,#03A89E,#33A1C9,#B0E0E6);
      overflow: hidden;
  } 
  .container{
      text-align: center;
      color: #fff;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
  }
  .container span{
      font-family:'Courier New', Courier, monospace;
      font-size: 40px;
      font-weight: 100;
      letter-spacing: 2px;
      margin-bottom: 15px;
      /* 过渡效果 */
      transition: 1s ease-in-out;
  }
  .form{
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      z-index: 2;
      opacity: 1;
      /* 不透明度改变时的过渡效果 */
      transition: opacity 0.5s;
  }
  .form input{
      outline: none;
      border: 1px solid rgba(255, 255, 255, 0.4);
      background-color: rgba(255, 255, 255, 0.2);
      width: 250px;
      padding: 10px 15px;
      border-radius: 10px;
      margin: 0 auto 10px auto;
      text-align: center;
      color: #fff;
      font-size: 15px;
      transition: 0.25s;
  }
  .form input::placeholder{
      color: #fff;
      font-size: 14px;
      font-weight: 300;
  }
  .form input:hover{
      background-color: #fff;
  }
  .form input:focus{
      background-color: #f5f7f98f;
      width: 300px;
      color: #ff719a;
  }
  .btn-register{
      outline: none;
      background-color:rgba(255, 255, 255, 0);
      color: rgb(240, 241, 241);
      border: none;
      width: 250px;
      padding: 10px 15px;
      border-radius: 10px;
      font-size: 15px; 
      font-weight: 800;
      cursor: pointer;
      transition: 0.25s;
  }
  .btn-login:hover{
      background-color: #f5f7f98f;
  }
  /* 背景方块*/
  .bg-squares{
      list-style: none;
      position: inherit;
      top: 0;
      left: 0;
      width: 90%;
      height: 100%;
      z-index: 1;
  }
  .bg-squares li{
      width: 40px;
      height: 40px;
      background-color: rgba(255, 255, 255, 0.15);
      position: inherit;
      bottom: -160px;
      /* 执行动画：动画名 时长 线性 无限次播放*/
      animation: squres 10s linear infinite ;
  }
  /* 为每一个方块设置不同的位置、大小、动画延迟时间、动画时长、背景色  */
  .bg-squares li:nth-child(1){
      left: 10%;
  }
  .bg-squares li:nth-child(2){
      left: 20%;
      width: 80px;
      height: 80px;
      /* 动画延迟时间 */
      animation-delay:1s;
      /* 动画时长 */
      animation-duration: 40s;
  }
  .bg-squares li:nth-child(3){
      left: 25%;
      animation-delay: 40s;
  }
  .bg-squares li:nth-child(4){
      left: 40%;
      width: 60px;
      height: 60px;
      background-color:rgba(255, 255, 255, 0.25) ;
      animation-duration: 30s;
  }
  .bg-squares li:nth-child(5){
      left: 70%;
  }
  .bg-squares li:nth-child(6){
      left: 80%;
      width: 120px;
      height:120px;
      background-color:rgba(255, 255, 255, 0.2) ;
      animation-delay: 15s;
  }
  .bg-squares li:nth-child(7){
      left: 32%;
      width: 160px;
      height: 160px;
      animation-delay: 25s;
  }
  .bg-squares li:nth-child(8){
      left: 55%;
      width: 20px;
      height: 20px;
      animation-delay: 15s;
      animation-duration: 40s;
  }
  .bg-squares li:nth-child(9){
      left: 25%;
      width: 10px;
      height: 10px;
      background-color: rgba(255, 255, 255, 0.3);
      animation-delay: 2s;
      animation-duration: 40s;
  }
  .bg-squares li:nth-child(10){
      left: 90%;
      width: 160px;
      height: 160px;
      animation-delay: 10s;
  }
  .container.success h1{
      transform: translateY(75px);
  }
  .container.success .form{
      display: none;
  }
  /*定义动画*/
  @keyframes squres{
      0%{
          transform: translateY(0);
      }
      100%{
          transform: translateY(-120vh) rotate(600deg);
      }
  }
</style>